<template>
  <div>
    <cus-modal
      ref="modal"
      title="食材详情"
      @on-visible-change="onVisibleChange"
      width="750"
      :showOkBtn="false"
      :cancelBtnName="closeBtnName"
      @onOk="onOk"
    >
      <Spin fix v-if="loading"></Spin>
      <Form
        ref="formValidate"
        :model="form"
        :rules="ruleValidate"
        :label-width="120"
      >
        <FormItem
          label="食材名称:"
          prop="materialName"
          :rules="{
            required: true,
            message: '食材名称不能为空',
            trigger: 'blur'
          }"
        >
          <Input
            v-model="form.materialName"
            clearable
            maxlength="20"
            style="width: 200px"
            disabled
            placeholder="请输入食材名称"
          ></Input>
        </FormItem>
        <FormItem
          label="食材种类:"
          prop="foodClass"
          :rules="[
            { required: true, message: '食材种类不能为空', trigger: 'change' }
          ]"
        >
          <Select
            v-model="form.foodClass"
            style="width: 200px"
            placeholder="请选择食材种类"
            disabled
            clearable
          >
            <Option
              :value="item.name"
              v-for="(item, index) in materialTypeList"
              :key="index"
              >{{ item.name }}</Option
            >
          </Select>
        </FormItem>
        <FormItem
          label="商品种类:"
          prop="productCategory"
          :rules="{
            required: true,
            message: '商品种类不能为空',
            trigger: 'change'
          }"
        >
          <Select
            v-model="form.productCategory"
            style="width:200px"
            placeholder="请选择商品种类"
            disabled
            clearable
          >
            <Option
              :value="item.categoryName"
              v-for="(item, index) in productcategoryList"
              :key="index"
              >{{ item.categoryName }}</Option
            >
          </Select>
        </FormItem>
        <FormItem
          label="是否称重方式出入库:"
          prop="weightFlag"
          :rules="[
            { required: true, message: '称重方式不能为空', trigger: 'change' }
          ]"
        >
          <Select
            v-model="form.weightFlag"
            placeholder="请选择称重方式"
            disabled
            style="width: 200px"
          >
            <Option value="0">否</Option>
            <Option value="1">是</Option>
          </Select>
        </FormItem>
        <FormItem
          label="是否常用:"
          prop="materialStatus"
          :rules="[
            { required: true, message: '是否常用不能为空', trigger: 'change' }
          ]"
        >
          <Select
            v-model="form.materialStatus"
            placeholder="请选择是否常用"
            style="width: 200px"
            clearable
            disabled
          >
            <Option value="0">否</Option>
            <Option value="1">是</Option>
          </Select>
        </FormItem>
        <FormItem
          label="产地:"
          prop="province"
 
        >
          <Select
            v-model="form.province"
            style="width: 200px"
            placeholder="请选择产地"
            disabled
            clearable
          >
            <Option value="北京">北京</Option>
            <Option value="上海">上海</Option>
            <Option value="天津">天津</Option>
            <Option value="重庆">重庆</Option>
            <Option value="河北">河北</Option>
            <Option value="山西">山西</Option>
            <Option value="内蒙古">内蒙古</Option>
            <Option value="辽宁">辽宁</Option>
            <Option value="吉林">吉林</Option>
            <Option value="黑龙江">黑龙江</Option>
            <Option value="江苏">江苏</Option>
            <Option value="浙江">浙江</Option>
            <Option value="安徽">安徽</Option>
            <Option value="福建">福建</Option>
            <Option value="江西">江西</Option>
            <Option value="山东">山东</Option>
            <Option value="河南">河南</Option>
            <Option value="湖北">湖北</Option>
            <Option value="湖南">湖南</Option>
            <Option value="广东">广东</Option>
            <Option value="广西">广西</Option>
            <Option value="海南">海南</Option>
            <Option value="四川">四川</Option>
            <Option value="贵州">贵州</Option>
            <Option value="云南">云南</Option>
            <Option value="西藏">西藏</Option>
            <Option value="陕西">陕西</Option>
            <Option value="甘肃">甘肃</Option>
            <Option value="宁夏">宁夏</Option>
            <Option value="青海">青海</Option>
            <Option value="新疆">新疆</Option>
            <Option value="香港">香港</Option>
            <Option value="澳门">澳门</Option>
            <Option value="台湾">台湾</Option>
          </Select>
        </FormItem>
        <FormItem label="季节:" prop="quarterList">
          <Select
            v-model="form.quarterList"
            style="width: 200px"
            placeholder="请选择季节"
            clearable
            disabled
            multiple
          >
            <Option value="春季">春季</Option>
            <Option value="夏季">夏季</Option>
            <Option value="秋季">秋季</Option>
            <Option value="冬季">冬季</Option>
          </Select>
        </FormItem>
        <FormItem
          label="计量单位:"
          prop="specification"
          :rules="[
            {
              required: true,
              message: '计量单位不能为空',
              trigger: 'change',
              type: 'number'
            }
          ]"
        >
          <Select
            v-model="form.specification"
            style="width: 200px"
            disabled
            placeholder="请选择计量单位"
            @on-change="changeSpecification"
          >
            <Option
              :value="item.specificationValue"
              v-for="(item, index) in specificationList"
              :key="index"
              >{{ item.specification }}</Option
            >
          </Select>
        </FormItem>
        <FormItem
          label="单位重量/kg:"
          prop="unitWeight"
          :rules="[
            {
              required: true,
              message: '单位重量不能为空',
              trigger: 'blur',
              type: 'number'
            }
          ]"
        >
          <InputNumber
            :min="0"
            v-model="form.unitWeight"
            style="width: 200px"
            disabled
          ></InputNumber>
        </FormItem>
        <FormItem
          label="价格:"
          prop="packagingPrice"
          :rules="[
            {
              required: true,
              message: '价格不能为空',
              trigger: 'blur',
              type: 'number'
            }
          ]"
        >
          <InputNumber
            :min="0"
            v-model="form.packagingPrice"
            style="width: 200px"
            disabled
          ></InputNumber>
        </FormItem>
        <FormItem
          label="折损比例(%):"
          prop="convertPro"
          :rules="[
            {
              required: true,
              message: '折损比例(%)不能为空',
              trigger: 'blur',
              type: 'number'
            }
          ]"
        >
          <InputNumber
            :min="0"
            v-model="form.convertPro"
            disabled
            style="width: 200px"
          ></InputNumber>
        </FormItem>
        <FormItem
          label="损耗率(%):"
          prop="storageLoss"
          :rules="[
            {
              required: true,
              message: '损耗率(%)不能为空',
              trigger: 'blur',
              type: 'number'
            }
          ]"
        >
          <InputNumber
            :min="0"
            :max="100"
            disabled
            v-model="form.storageLoss"
            style="width: 200px"
          ></InputNumber>
        </FormItem>
        <FormItem label="规则分类:" prop="foodRuleClass">
          <Select
            v-model="form.foodRuleClass"
            style="width: 200px"
            placeholder="请选择规则分类"
            disabled
            clearable
          >
            <Option
              :value="item.foodRuleName"
              v-for="(item, index) in foodRuleTypeList"
              :key="index"
              >{{ item.foodRuleName }}</Option
            >
          </Select>
        </FormItem>
        <FormItem label="品牌:" prop="brand">
          <Input
            v-model="form.brand"
            clearable
            maxlength="20"
            style="width: 200px"
            placeholder="请输入品牌"
            disabled
          ></Input>
        </FormItem>
        <FormItem label="商品条形码:" prop="snCode">
          <Input
            v-model="form.snCode"
            clearable
            maxlength="20"
            style="width: 200px"
            disabled
            placeholder="请输入商品条形码"
          ></Input>
        </FormItem>
        <FormItem label="库存预警:" prop="sellByDat">
          <Input
            v-model="form.stockWarningPackagingQty"
            clearable
            maxlength="20"
            style="width: 200px"
            disabled
            placeholder="请输入库存预警"
          ></Input>
        </FormItem>
        <FormItem label="保质期(天):" prop="sellByDat">
          <Input
            v-model="form.shelfLifeDay"
            clearable
            maxlength="20"
            style="width: 200px"
            disabled
            placeholder="请输入保质期"
          ></Input>
        </FormItem>
      </Form>
    </cus-modal>
  </div>
</template>

<script>
import {
  localFoodAdd,
  localFoodAlter,
  materialType,
  selectBasSpecificationList,
  getFoodRuleTypeList,
  productcategory
} from "@/api/business/dishesModule";

const form = {
  materialId: "",
  brand: "",
  convertPro: 100,
  foodClass: "",
  foodRuleClass: "",
  materialName: "",
  packagingPrice: 0,
  province: "",
  quarterList: [],
  snCode: "",
  specification: null,
  storageLoss: 5,
  unitWeight: 1,
  weightFlag: "1",
  materialStatus: "0",
  productCategory: "",
  shelfLifeDay: '', //保质期
};

export default {
  data() {
    return {
      form: form,
      ruleValidate: {},
      loading: false,
      materialTypeList: [],
      specificationList: [],
      foodRuleTypeList: [],
      productcategoryList: [],
      closeBtnName: "关闭"
    };
  },
  mounted() {
    this.form = this.$cu.deepClone(form);
  },
  methods: {
    onVisibleChange(v) {
      if (!v) {
        this.$refs["formValidate"].resetFields();
        this.form = this.$cu.deepClone(form);
      }
    },
    show() {
      this.$refs["modal"].show = true;
      console.log(this.form);
      this.materialTypeApi();
      this.selectBasSpecificationListApi();
      this.getFoodRuleTypeListApi();
      this.productcategoryApi();
    },
    onOk() {
      this.$refs["formValidate"].validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.form.materialId) {
            this.localFoodAlterApi();
          } else this.localFoodAddApi();
        }
      });
    },
    // 规格变更
    changeSpecification(value) {
      console.log("value---" + value);
      if (value == 0) {
        this.form.unitWeight = 1;
      }
      if (value == 1) {
        this.form.unitWeight = 0.5;
      }
    },
    // 添加食材
    localFoodAddApi() {
      this.loading = true;
      return new Promise(resolve => {
        localFoodAdd(this.form).then(res => {
          this.loading = false;
          if (res.retCode === 2000) {
            this.$Message.success("添加成功");
            this.$refs["modal"].show = false;
            this.$parent.onInit();
            resolve();
          }
        });
      });
    },
    // 编辑食材
    localFoodAlterApi() {
      this.loading = true;
      return new Promise(resolve => {
        localFoodAlter(this.form).then(res => {
          this.loading = false;
          if (res.retCode === 2000) {
            this.$Message.success("编辑成功");
            this.$refs["modal"].show = false;
            this.$parent.onInit();
            resolve();
          }
        });
      });
    },
    // 获取食材种类
    materialTypeApi() {
      return new Promise(resolve => {
        materialType({}).then(res => {
          if (res.retCode === 2000) {
            this.materialTypeList = res.data;
            resolve();
          }
        });
      });
    },
    // 获取食材规格
    selectBasSpecificationListApi() {
      return new Promise(resolve => {
        selectBasSpecificationList({}).then(res => {
          if (res.retCode === 2000) {
            this.specificationList = res.data;
            if (res.data.length && !this.form.materialId) {
              this.form.specification = res.data[0].specificationValue;
            }

            resolve();
          }
        });
      });
    },
    getFoodRuleTypeListApi() {
      return new Promise(resolve => {
        getFoodRuleTypeList({}).then(res => {
          if (res.retCode === 2000) {
            this.foodRuleTypeList = res.data;
            resolve();
          }
        });
      });
    },
    // 获取商品分类
    productcategoryApi() {
      return new Promise(resolve => {
        productcategory({
          size: -1
        }).then(res => {
          if (res.retCode === 2000) {
            this.productcategoryList = res.data.records;
            resolve();
          }
        });
      });
    }
  }
};
</script>

<style scoped>
/deep/.ivu-select-multiple .ivu-select-selection .ivu-select-placeholder {
  /* height: 40px !important; */
  height: auto !important;
  /* line-height: 40px !important; */
}
/deep/.ivu-select-selection {
  height: auto !important;
  /* min-height: 40px !important; */
  border-radius: 2px !important;
}
</style>

<style scoped lang="less">
.permission {
  height: 300px;
  width: 500px;
  border: 1px solid #dcdee2;
  overflow-y: auto;
  border-radius: 2px;
  padding: 0 0 0 10px;
}
</style>
